<template>
    <simplebar-vue class="run-menu-simplebar">
        <el-menu text-color="#333" background-color="#fff" :collapse="isCollapse" :default-active="defaultActive">
            <run-menu-item v-for="(item, index) in menuData" :key="index" :menu-item="item" :is-group="isGroup" is-root :props="props"></run-menu-item>
        </el-menu>
    </simplebar-vue>
</template>
<script>
import SimplebarVue from 'simplebar-vue'
import RunMenuItem from './run-menu-item.vue'

export default {
    name: 'run-menu-vertical',
    components: {
        SimplebarVue,
        RunMenuItem,
    },
    props: {
        isCollapse: {
            type: Boolean,
            required: true
        },
        isGroup: {
            type: Boolean,
            default: false
        },
        menuData: {
            type: Array,
            required: true
        },
        defaultActive: {
            type: String
        },
        props: {
            type: Object,
            default: () => {
                return {
                    label: 'title',
                    children: 'children',
                    disabled: 'disabled',
                    index: 'index',
                    iconName: 'icon',
                    link: 'link'
                }
            }
        },
    }
}
</script>
<style lang="scss" scoped>
.run-menu-simplebar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    .el-menu {
        border-right: none;
    }
    .el-menu--collapse>.run-menu-item ::v-deep .el-submenu>.el-submenu__title span {
        height: 0;
        width: 0;
        overflow: hidden;
        visibility: hidden;
        display: inline-block;
    }
}
</style>